<template>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in NewsList" :key="item.id">
            <router-link :to="'/home/newsInfo/' + item.id">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    <h1>{{item.title}}</h1>
                    <p class='mui-ellipsis'>
                        <span>发布时间：{{ item.add_time | dateFormat}}</span>
                        <span>点击：{{ item.click }} 次</span>
                    </p>
                </div>
            </router-link>
        </li>
    </ul>
</template>
<script>
import {Toast} from 'mint-ui'

export default {
    data() {
        return {
            NewsList: []
        }
    },
    created() {
        this.getNewsList();
    },
    methods: {
        getNewsList() {  //获取新闻列表
            this.$http.get('http://www.liulongbin.top:3005/api/getnewslist').then( result => {
                // console.log(result.body)
                if( result.body.status === 0){
                    this.NewsList = result.body.message
                } else {
                    Toast('获取新闻列表失败')
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .mui-table-view{
        li{
            h1{
                font-size:14px;
            }
           .mui-ellipsis{
               font-size:12px;
               color:#222;
               display:flex;
               color:#226aff;
               justify-content: space-between;
           } 
        }
    }
</style>



